Frontend WebCodecs Audio: Bygga en ljudbehandlingspipeline i realtid

WebCodecs API är ett kraftfullt verktyg för att arbeta med ljud- och videodata direkt i webbläsaren. Till skillnad från det traditionella Web Audio API ger WebCodecs lågnivååtkomst till codecar, vilket gör att utvecklare kan implementera anpassade pipelines för kodning, avkodning och bearbetning. Detta öppnar upp en värld av möjligheter för ljudapplikationer i realtid, från avancerade ljudeffekter till livestreaming och kommunikationsplattformar.

Vad är WebCodecs Audio?

WebCodecs Audio låter JavaScript-kod interagera direkt med ljudcodecar i webbläsaren. Det ger finkornig kontroll över kodnings- och avkodningsprocesserna, vilket erbjuder betydande prestandafördelar och flexibilitet jämfört med API:er på högre nivå. Genom att utnyttja WebCodecs kan utvecklare skapa högt optimerade och anpassade arbetsflöden för ljudbehandling.

Huvudfördelar med WebCodecs Audio:

• Lågnivåkontroll: Direkt åtkomst till codec-parametrar för finjustering och optimering.
• Prestanda: Hårdvaruacceleration för kodning och avkodning, vilket leder till snabbare behandlingstider.
• Flexibilitet: Stöd för ett brett utbud av codecar och möjligheten att implementera anpassad bearbetningslogik.
• Realtidskapacitet: Möjliggör skapandet av responsiva och interaktiva ljudapplikationer.

Konfigurera din WebCodecs Audio-miljö

Innan du dyker ner i koden är det viktigt att säkerställa att din webbläsare stöder WebCodecs och att du har en grundläggande förståelse för JavaScript och asynkron programmering (Promises, async/await). De flesta moderna webbläsare stöder WebCodecs, men det är alltid en bra idé att kontrollera kompatibiliteten. Du kan kontrollera kompatibiliteten med följande kodavsnitt:

            
if ('AudioEncoder' in window && 'AudioDecoder' in window) {
  console.log('WebCodecs Audio stöds!');
} else {
  console.log('WebCodecs Audio stöds INTE i den här webbläsaren.');
}

            

              
                Copy
              
            
          

Denna kod kontrollerar om AudioEncoder- och AudioDecoder-gränssnitten är tillgängliga i window-objektet. Om båda finns stöds WebCodecs Audio.

Bygga en grundläggande ljudbehandlingspipeline

Låt oss skapa ett enkelt exempel som visar hur man kodar och avkodar ljud med WebCodecs. Detta exempel kommer att innebära att fånga ljud från användarens mikrofon, koda det med en specificerad codec och sedan avkoda det igen för uppspelning.

1. Fånga ljud från mikrofonen

Vi använder getUserMedia-API:et för att komma åt användarens mikrofon. Detta API kräver användarens tillstånd, så det är viktigt att hantera tillståndsförfrågan på ett smidigt sätt.

            
async function getMicrophoneStream() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: false,
    });
    return stream;
  } catch (error) {
    console.error('Fel vid åtkomst till mikrofon:', error);
    return null;
  }
}

const stream = await getMicrophoneStream();
if (!stream) {
  console.log('Mikrofonåtkomst nekad eller otillgänglig.');
  return;
}

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
const bufferSize = 4096; // Justera bufferstorlek efter behov
const scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1); // 1 ingångs-, 1 utgångskanal

source.connect(scriptProcessor);
scriptProcessor.connect(audioContext.destination);

scriptProcessor.onaudioprocess = function(event) {
  const audioData = event.inputBuffer.getChannelData(0); // Hämta ljuddata från den första kanalen
  // Bearbeta audioData här (t.ex. koda, filtrera)
  encodeAudio(audioData);
};

            

              
                Copy
              
            
          

Detta kodavsnitt fångar ljud från mikrofonen och ansluter det till en ScriptProcessorNode. Händelsehanteraren onaudioprocess utlöses när en ny buffert med ljuddata är tillgänglig.

2. Koda ljud med WebCodecs

Nu ska vi koda ljuddatan med hjälp av AudioEncoder-API:et. Vi kommer att konfigurera kodaren med specifika codec-parametrar.

            
let audioEncoder;

async function initializeEncoder(sampleRate, numberOfChannels) {
  const config = {
    codec: 'opus', // Eller 'aac', 'pcm',
    sampleRate: sampleRate,
    numberOfChannels: numberOfChannels,
    bitrate: 64000, // Justera bitrate efter behov
    // Lägg till andra codec-specifika parametrar här
  };

  audioEncoder = new AudioEncoder({
    output: encodedChunk => {
      // Hantera kodad ljudchunk
      decodeAudio(encodedChunk);
    },
    error: e => {
      console.error('Kodningsfel:', e);
    }
  });

  try {
    await audioEncoder.configure(config);
    console.log('Kodaren har konfigurerats.');
  } catch (error) {
    console.error('Misslyckades med att konfigurera kodaren:', error);
  }
}

async function encodeAudio(audioData) {
  if (!audioEncoder) {
        await initializeEncoder(audioContext.sampleRate, 1); // Initiera med mikrofonspecifikationer
    }
  // Skapa ett AudioData-objekt från Float32Array
  const audioFrame = new AudioData({
    format: 'f32-planar',
    sampleRate: audioContext.sampleRate,
    numberOfChannels: 1,
    numberOfFrames: audioData.length,
    timestamp: performance.now(), // Använd en tidsstämpel
    data: audioData
  });

  audioEncoder.encode(audioFrame);
  audioFrame.close(); // Frigör resurser
}

            

              
                Copy
              
            
          

Denna kod initierar en AudioEncoder med den angivna codec-konfigurationen. Återanropet output anropas när kodaren producerar en kodad chunk. Funktionen encodeAudio tar den råa ljuddatan och kodar den med den konfigurerade kodaren. Konfigurationen är avgörande: experimentera med olika codecar (opus, aac) och bitrates för att uppnå optimal kvalitet och prestanda för ditt specifika användningsfall. Tänk på målplattformen och nätverksförhållandena när du väljer dessa parametrar. Formatet 'f32-planar' är viktigt och måste matcha formatet på inkommande AudioBuffer-data, som vanligtvis är en Float32Array. Tidsstämpeln används för att hjälpa till att bibehålla ljudsynkronisering.

3. Avkoda ljud med WebCodecs

Nu ska vi avkoda de kodade ljudchunkarna med hjälp av AudioDecoder-API:et.

            
let audioDecoder;

async function initializeDecoder(sampleRate, numberOfChannels) {
  const config = {
    codec: 'opus', // Måste matcha kodarens codec
    sampleRate: sampleRate,
    numberOfChannels: numberOfChannels,
    // Lägg till andra codec-specifika parametrar här
  };

  audioDecoder = new AudioDecoder({
    output: audioFrame => {
      // Hantera avkodad ljudram
      playAudio(audioFrame);
    },
    error: e => {
      console.error('Avkodningsfel:', e);
    }
  });

  try {
    await audioDecoder.configure(config);
    console.log('Avkodaren har konfigurerats.');
  } catch (error) {
    console.error('Misslyckades med att konfigurera avkodaren:', error);
  }
}

async function decodeAudio(encodedChunk) {
    if (!audioDecoder) {
        await initializeDecoder(audioContext.sampleRate, 1); // Initiera med mikrofonspecifikationer
    }
  audioDecoder.decode(encodedChunk);
}

            

              
                Copy
              
            
          

Denna kod initierar en AudioDecoder med en konfiguration som matchar kodaren. Återanropet output anropas när avkodaren producerar en avkodad ljudram. Funktionen decodeAudio tar den kodade chunken och avkodar den. Codecen som används i avkodarens konfiguration *måste* matcha codecen som används i kodarens konfiguration.

4. Spela upp det avkodade ljudet

Slutligen, låt oss spela upp det avkodade ljudet med Web Audio API.

            
async function playAudio(audioFrame) {
  // Skapa en AudioBuffer från AudioData
  const numberOfChannels = audioFrame.numberOfChannels;
  const sampleRate = audioFrame.sampleRate;
  const length = audioFrame.numberOfFrames;
  const audioBuffer = audioContext.createBuffer(numberOfChannels, length, sampleRate);

  for (let channel = 0; channel < numberOfChannels; channel++) {
    const channelData = audioBuffer.getChannelData(channel);
    const frame = new Float32Array(length);
    await audioFrame.copyTo(frame, { planeIndex: channel });
    channelData.set(frame);
  }
  // Skapa en bufferkälla och spela upp ljudet
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(audioContext.destination);
  source.start();

  audioFrame.close(); // Frigör resurser
}

            

              
                Copy
              
            
          

Denna kod skapar en AudioBuffer från den avkodade ljudramen och använder sedan en BufferSource-nod för att spela upp ljudet via ljudkontextens destination. Det kritiska steget här är att kopiera datan från AudioFrame till AudioBuffer:s kanaldata. Du måste iterera genom varje kanal. Efter uppspelning, se till att du frigör resurserna som används av AudioFrame.

Avancerade ljudbehandlingstekniker

WebCodecs Audio öppnar dörren till ett brett utbud av avancerade ljudbehandlingstekniker. Här är några exempel:

1. Ljudfiltrering

Du kan implementera anpassade ljudfilter genom att manipulera ljuddatan direkt. Detta gör att du kan skapa effekter som equalization, brusreducering och reverb.

            
function applyHighPassFilter(audioData, cutoffFrequency, sampleRate) {
  const rc = 1.0 / (2 * Math.PI * cutoffFrequency);
  const dt = 1.0 / sampleRate;
  const alpha = dt / (rc + dt);

  let previousValue = audioData[0];
  for (let i = 1; i < audioData.length; i++) {
    const newValue = alpha * (previousValue + audioData[i] - previousValue);
    audioData[i] = newValue;
    previousValue = newValue;
  }
  return audioData;
}

            

              
                Copy
              
            
          

Denna kod implementerar ett enkelt högpassfilter. Du kan modifiera denna kod för att skapa olika typer av filter, såsom lågpass-, bandpass- och notchfilter. Kom ihåg att den specifika implementeringen av filtret beror på den önskade effekten och ljuddatans egenskaper.

2. Ljudvisualisering

Du kan visualisera ljuddata genom att analysera frekvensspektrumet och amplituden. Detta kan användas för att skapa interaktiva visualiseringar som svarar på ljudet.

            
function visualizeAudio(audioData) {
  const canvas = document.getElementById('audio-visualizer');
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;

  ctx.clearRect(0, 0, width, height);

  const barWidth = width / audioData.length;
  for (let i = 0; i < audioData.length; i++) {
    const barHeight = audioData[i] * height / 2; // Skala amplituden till canvas-höjden
    ctx.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';
    ctx.fillRect(i * barWidth, height / 2 - barHeight / 2, barWidth, barHeight);
  }
}

            

              
                Copy
              
            
          

Denna kod visualiserar ljuddatan som en serie vertikala staplar. Höjden på varje stapel motsvarar ljudets amplitud vid den tidpunkten. Mer avancerade visualiseringar kan skapas med tekniker som Fast Fourier Transform (FFT) för att analysera frekvensspektrumet.

3. Ljudeffekter i realtid

Du kan skapa ljudeffekter i realtid genom att manipulera ljuddatan medan den bearbetas. Detta gör att du kan skapa effekter som eko, chorus och distorsion.

            
function applyEchoEffect(audioData, delay, feedback, sampleRate) {
  const delaySamples = Math.round(delay * sampleRate); // Fördröjning i sampel
  const echoBuffer = new Float32Array(audioData.length + delaySamples);
  echoBuffer.set(audioData, delaySamples);

  for (let i = 0; i < audioData.length; i++) {
    audioData[i] += echoBuffer[i] * feedback;
  }
  return audioData;
}

            

              
                Copy
              
            
          

Denna kod implementerar en enkel ekoeffekt. Du kan modifiera denna kod för att skapa mer komplexa effekter genom att kombinera flera ljudbehandlingstekniker. Kom ihåg att ljudbehandling i realtid kräver noggrann optimering för att minimera latens och säkerställa en smidig användarupplevelse.

Att tänka på för en global publik

När du utvecklar ljudapplikationer för en global publik är det viktigt att ta hänsyn till följande faktorer:

• Språkstöd: Se till att din applikation stöder flera språk för ljudmeddelanden, instruktioner och användargränssnitt.
• Tillgänglighet: Tillhandahåll alternativa inmatningsmetoder för användare med funktionsnedsättningar, såsom taligenkänning och text-till-tal.
• Nätverksförhållanden: Optimera dina ljudcodecar och strömningsprotokoll för olika nätverksförhållanden runt om i världen. Överväg adaptiv bitrate-strömning för att justera ljudkvaliteten baserat på tillgänglig bandbredd.
• Kulturell känslighet: Var medveten om kulturella skillnader i ljudpreferenser och undvik att använda ljud eller musik som kan vara stötande eller olämplig i vissa regioner. Till exempel kan vissa musikaliska skalor eller rytmer ha olika kulturella konnotationer i olika delar av världen.
• Latens: Minimera latensen för att säkerställa en responsiv och interaktiv användarupplevelse, särskilt för kommunikationsapplikationer i realtid. Överväg att använda tekniker som codecar med låg latens och optimerade nätverksprotokoll för att minska latensen.

Kodavsnitt: Komplett exempel

Här är ett komplett kodavsnitt som integrerar de koncept som diskuterats ovan:

            
// (Inkludera alla kodavsnitt från ovan: getMicrophoneStream, initializeEncoder, encodeAudio,
// initializeDecoder, decodeAudio, playAudio, applyHighPassFilter, visualizeAudio, applyEchoEffect)

async function main() {
  const stream = await getMicrophoneStream();
  if (!stream) {
    console.log('Mikrofonåtkomst nekad eller otillgänglig.');
    return;
  }

  const audioContext = new AudioContext();
  const source = audioContext.createMediaStreamSource(stream);
  const bufferSize = 4096;
  const scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);

  source.connect(scriptProcessor);
  scriptProcessor.connect(audioContext.destination);

  scriptProcessor.onaudioprocess = function(event) {
    const audioData = event.inputBuffer.getChannelData(0);

    // Applicera ett högpassfilter
    const filteredAudioData = applyHighPassFilter(audioData.slice(), 400, audioContext.sampleRate);

    // Applicera en ekoeffekt
    const echoedAudioData = applyEchoEffect(filteredAudioData.slice(), 0.2, 0.5, audioContext.sampleRate);

    // Visualisera ljudet
    visualizeAudio(echoedAudioData);

    encodeAudio(audioData);
  };
}

main();

            

              
                Copy
              
            
          

Slutsats

Frontend WebCodecs Audio erbjuder ett kraftfullt och flexibelt sätt att bygga ljudbehandlingspipelines i realtid i webbapplikationer. Genom att utnyttja den lågnivåkontroll och hårdvaruacceleration som WebCodecs erbjuder kan utvecklare skapa högt optimerade och anpassade ljudupplevelser. Från ljudeffekter och visualiseringar till livestreaming och kommunikationsplattformar, öppnar WebCodecs Audio upp en värld av möjligheter för framtidens webbljud.

Vidare utforskning

• WebCodecs API-dokumentation
• AudioEncoder API-dokumentation
• AudioDecoder API-dokumentation

Experimentera med olika codecar, parametrar och bearbetningstekniker för att upptäcka den fulla potentialen hos WebCodecs Audio. Var inte rädd för att utforska anpassade algoritmer och visualiseringar för att skapa unika och engagerande ljudupplevelser för dina användare. Möjligheterna är oändliga!